<template>
    <p>列表及分页</p>
    <el-table :data="tableData" border style="width: 100%;">
    <el-table-column prop="account" label="用户名"></el-table-column>
    <el-table-column prop="createtime" label="注册时间"></el-table-column>
    <el-table-column prop="level" label="等级"></el-table-column>
</el-table>
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-size="[5,10]"
 layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
  @current-change="handleCurrentChange">
</el-pagination>
</template>

<script setup>
import { ref } from 'vue'

const data = Array.from(Array(114),(v, i) => {
    return {
        account: 'uaa' + (i + 1),
        createtime: new Data(Data.now() + Math.ceil(Math.random() * 1000)),
        level:Math.ceil(Math.random() * 10)
    }
})

console.log('data', data);

const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)

const getData = (page, pageSize) => {
    tableData.value = data.slice((page-1) * pageSize, page * pageSize)
    total.value = data.lenth
}
getData(1,pageSize.value)

const handleSizeChange = (val) => {
    console.log(`current page: ${val}`)
    getData(val,pageSize.value)
}

</script>